<template>
  <div class="wrap">
    <!-- 导航 -->
    <div class="nav">
      <div class="icon">
        <img src="/static/images/dd.png" alt />
      </div>
      <div class="input">
        <div class="icon1">
          <img src="/static/images/ss.png" alt />
        </div>
        <input type="text" />
      </div>
      <div class="icon">
        <img src="/static/images/s.png" alt />
      </div>
    </div>
    <!-- 轮播图 -->
    <swiper indicator-dots="true" autoplay="true">
      <swiper-item>
        <img mode="aspectFill" src="/static/images/1.jpg" alt />
      </swiper-item>
      <swiper-item>
        <img mode="aspectFill" src="/static/images/2.jpg" alt />
      </swiper-item>
      <swiper-item>
        <img mode="aspectFill" src="/static/images/3.png" alt />
      </swiper-item>
      <swiper-item>
        <img mode="aspectFill" src="/static/images/4.jpg" alt />
      </swiper-item>
      <swiper-item>
        <img mode="scaleToFill" src="/static/images/5.jpg" alt />
      </swiper-item>
    </swiper>
    <!-- 畅销榜 -->
    <div class="classification">
      <ul>
        <li v-for="(item,index) of listitem" :key="id">
          <img :src="item.image" alt />
        </li>
      </ul>
    </div>
    <!-- 广告图片 -->
    <img class="advertising-img" mode="aspectFill" src="/static/images/6.jpg" />
    <!-- 图书列表 -->
    <div class="list">
      <div class="item" v-for="(item,index) of itemimglist" :key="id" @click="godetails(item.id)">
        <img :src="item.image" alt />
        <p class="name">{{item.name}}</p>
        <span class="dd">当当自营</span>
        <span class="mj">满减</span>
        <p class="price">￥{{item.price}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listitem: [],
      itemimglist: []
    };
  },
  methods: {
    godetails(id){
console.log(id)
wx.navigateTo({
  url:`/pages/details/main?id=${id}`
})
    }
  },
  created() {
    //请求数据
    wx.request({
      url: "http://127.0.0.1:8080/type.json",
      success: res => {
        // console.log(res.data);
        var list = res.data;
        this.listitem = list;
      },
      fail: err => {
        console.log(err);
      }
    });
    wx.request({
      url: "http://127.0.0.1:8080/book.json",
      success: res => {
        // console.log(res);
        this.itemimglist = res.data;
      },
      fail: err => {
        console.log(err);
      }
    });
  }
};
</script>
<style scoped>
.wrap {
  width: 750rpx;
  /* border: 1rpx solid black; */
}
.nav {
  width: 750rpx;
  height: 58rpx;
  /* border: 1rpx solid firebrick; */
  display: flex;
  justify-content: space-around;
  padding: 11rpx 0;
}
.icon {
  width: 75rpx;
  height: 58rpx;
  /* border: 1rpx solid red; */
}
.icon img {
  width: 75rpx;
  height: 58rpx;
}
.input {
  width: 546rpx;
  height: 58rpx;
  display: flex;
  background-color: rgba(204, 204, 204, 0.808);
  border-radius: 20rpx;
  overflow: hidden;
}
.icon1 {
  width: 38rpx;
  height: 38rpx;
  /* border: 1rpx solid black; */
  padding: 10rpx;
}
.icon1 img {
  width: 38rpx;
  height: 38rpx;
}
input {
  width: 500rpx;
  height: 58rpx;
  /* border:1rpx solid #ccc; */
}
swiper {
  width: 750rpx;
  height: 225rpx;
  /* border: 1rpx solid darkblue; */
}
swiper-item img {
  width: 750rpx;
  height: 225rpx;
}
.classification {
  width: 750rpx;
  height: 325rpx;
  /* border: 1rpx solid blue; */
}
.classification ul {
  width: 750rpx;
  height: 325rpx;
  display: flex;
  flex-wrap: wrap;
}
.classification ul li {
  list-style: none;
  width: 148rpx;
  height: 162rpx;
}
.classification ul li img {
  width: 148rpx;
  height: 162rpx;
}
.advertising-img {
  width: 750rpx;
  height: 205rpx;
  /* border: 1rpx solid red; */
}
.list {
  width: 750rpx;
  /* border: 1rpx solid green; */
}
.list .item {
  width: 370rpx;
  height: 535rpx;
  /* border: 1rpx solid firebrick; */
  float: left;
}
.list .item img {
  width: 370rpx;
  height: 369rpx;
}
.name{
  height: 47rpx;
  /* border: 1rpx solid #f32330; */
  font-size: 33rpx;
}
.price{
  height: 31rpx;
  color: #f06b70;
  font-size: 33rpx;
  margin: 0 10rpx;
}
.list .item .dd{
width: 108rpx;
height: 31rpx;
border: 1rpx solid #f32330;
color: #f32330;
font-size: 25rpx;
margin: 0 10rpx;
}
.list .item .mj{
width: 58rpx;
height: 29rpx;
background-color:#f32330;
color: #fff;
font-size: 25rpx;
}
</style>